<template>
    <div class="online-mall">
        <van-image 
            width="100%" 
            height="80vw" 
            fit="fill" 
            :src="formData.sf_ex50"
        >
        </van-image>
        <div class="content-box-1">
            <div class="title">{{ formData.sf_ex2 }}</div>
            <div class="sell">已售{{ Number(formData.sum) }}</div>
        </div>
        <div class="content-box-2">
            <div>商品描述</div>
            <div class="desc">{{ formData.sfe_ex21 }}</div>
        </div>
        <!-- 价格单位为分，所以要*100 -->
        <van-submit-bar 
            :price="totalAmount * 100"
            button-text="提交订单" 
            placeholder
            :disabled="false"
            @submit="onSubmit" 
        >
            <template #default>
                <van-icon 
                    name="shopping-cart" 
                    color="#fc5131" 
                    size="8vw"
                    @click="addShoppingCart"
                />
                <van-stepper 
                    v-model="stepNum"
                    integer 
                    default-value="1"
                    min="1"
                    @change="onStepChange"
                />
            </template>
        </van-submit-bar>
        <div 
            class="static-img"
            @click="router.push('/shoppingCart')"
        >
            <van-icon 
                name="cart-o" 
                color="#fc5131" 
                size="8vw"
            />
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onBeforeUnmount } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { showDialog, showConfirmDialog, showLoadingToast, closeToast, showFailToast } from 'vant'
    import { useStore } from '@/store'
    import { saveshoppinginfoApi, saveOrderinfoApi, getsfiteminfoApi } from '@/apis'


    const router = useRouter()
    const route = useRoute()
    const store = useStore()

    const formData: Ref<any> = ref({
        // sf_ex2: '商品标题',
        // sf_ex9: '2.00',
        // sum: '99+',
        // sf_ex50: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
        // sfe_ex21: '少时诵诗书所所所所所所所所所所所所所所所所所所所所所所'
    })
    const stepNum: Ref<any> = ref(1)
    const totalAmount: Ref<number> = ref(0) //总选择金额
    onBeforeMount(() => {
        showLoadingToast({
            message: '加载中...',
            // overlay: true,
            forbidClick: true,
            duration: 0
        })
        getsfiteminfoApi({
            sf_id: route.query.sf_id,
            company: '海陵区凤栖园智慧墓园系统'
        }).then(res => {
            res[0].sfe_ex21 = unescape(res[0].sfe_ex21)
            formData.value = res[0]
            totalAmount.value += formData.value.sf_ex9 * stepNum.value
        }).finally(() => {
            closeToast()
        })
    })
    const onStepChange = (val) => {
        totalAmount.value = formData.value.sf_ex9 * stepNum.value
    }
    const addShoppingCart = () => {
        showConfirmDialog({
            title: '提示',
            message: '是否添加到购物车',
        }).then(() => {
            showLoadingToast({
                message: '加载中...',
                forbidClick: true,
                duration: 0
            });
            saveshoppinginfoApi({
                sc_ex1: formData.value.sf_ex2,
                sc_ex2: formData.value.sf_ex9,
                sc_ex3: stepNum.value.toString(),
            }).then(res => {
                if (res[0].status == '+OK') {
                    // showDialog({
                    //     title: '提示',
                    //     message: res[0].msg,
                    // }).then(() => {
                    // });
                } else {
                    showDialog({
                        title: '提示',
                        message: res[0].msg,
                    }).then(() => {

                    });
                }
            }).catch(err => {
                showDialog({
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                })
            }).finally(() => {
                closeToast()
            })
        }).catch(err => {

        })
    }
    const onSubmit = () => {
        console.log('submit')
        showLoadingToast({
            message: '加载中...',
            overlay: true,
            forbidClick: true,
            duration: 0
        })
        // 调接口
        saveOrderinfoApi({
            // data: {
            //     openid: store.openid
            // },
            item: JSON.stringify([
                {
                    oc_ex1: formData.value.sf_ex2,
                    oc_ex2: formData.value.sf_ex9,
                    oc_ex3: stepNum.value,
                    oc_ex4: route.query.sf_id
                }
            ]),
        }).then(res => {
            if (res[0].status == '+OK') {
                showDialog({
                    title: '提示',
                    message: res[0].msg,
                }).then(() => {
                    router.push('/')
                });
            } else {
                showDialog({
                    title: '提示',
                    message: res[0].msg,
                }).then(() => {

                });
            }
            
        }).catch(err => {
            showDialog({
                title: '提示',
                message: '网络异常，请稍后重试！',
            })
        }).finally(() => {
            closeToast()
        })
    }
    
</script>
<style lang="scss" scoped>
    .online-mall {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: scroll;
        // background-image: url('@/assets/bg/bg10.png');
        // background-size: 100% 100%;
        background-color: #f1f1f1;
    }
    .content-box-1 {
        background-color: #fff;
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        .title {
            font-weight: bold;
        }
        .sell {
            color: #846161;

        }
    }
    .content-box-2 {
        margin-top: 10px;
        background-color: #fff;
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        .desc {
            margin-top: 10px;
            background-color: #f1f1f1;
            text-indent: 35px;
        }
    }
    .static-img {
        position: fixed;
        top: 20px;
        right: 20px;
    }
</style>